import React from "react";
import { View, Text, TouchableOpacity, InteractionManager } from "react-native";
import { BProps, BState } from "../../index";
import { R } from "../../../core";
import {IconFont } from 'enoad-common/src/index';
const NativeListModule = require("../../../core/modules/NativeListModule");

interface IProps extends BProps {
  backgroundColor?: string;
  leftButtonColor?: string;
  renderLeft?: () => React.ReactElement;
  renderCenter?: () => React.ReactElement;
  renderRight?: () => React.ReactElement;
}

export default class HeaderView extends React.Component<IProps, BState> {
  constructor(props: IProps) {
    super(props);
  }

  /**
   * 标题栏
   * @returns 返回标题view
   */
  renderLeft() {
    return (
      <TouchableOpacity
        style={R.styles.navigationButtonLeft}
        onPress={() => this.backPress()}
      >
        <IconFont
          name={"iconfont-left"}
          size={20}
          color={this.props.leftButtonColor || R.color.white}
        />
      </TouchableOpacity>
    );
  }
  renderCenter() {
    return (
      <Text numberOfLines={1} style={R.styles.navigationTitleFont}>
        {this.props.title}
      </Text>
    );
  }

  /**
   * 后退按钮事件
   */
  backPress() {
    InteractionManager.runAfterInteractions(() => {
      if (this.props.navigator) {
        this.props.navigator.pop();
      } else {
        NativeListModule.finish();
      }
    });
  }
  render() {
    let leftView = this.props.renderLeft && this.props.renderLeft();
    let centerView = this.props.renderCenter && this.props.renderCenter();
    return (
      <View style={{ flexDirection: "column" }}>
        <View
          style={[
            R.styles.navigationView,
            { backgroundColor: this.props.backgroundColor || R.color.titleBg },
          ]}
        >
          {this.props.renderCenter ? centerView : this.renderCenter()}
          {this.props.renderLeft ? leftView : this.renderLeft()}
          {this.props.renderRight && this.props.renderRight()}
        </View>
        <View style={R.styles.line} />
      </View>
    );
  }
}
